import { Suspense, lazy } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';

import { AppRouteObject } from '#/router';

const ListPage = lazy(() => import(`@/pages/design/list`));
const CatePage = lazy(() => import('@/pages/design/cate'));

const design: AppRouteObject = {
  order: 1,
  path: 'design',
  element: (
    <Suspense fallback={<CircleLoading />}>
      <Outlet />
    </Suspense>
  ),
  meta: {
    label: '设计模版',
    icon: <SvgIcon icon="ic-analysis" className="ant-menu-item-icon" size="24" />,
    key: '/design',
  },
  children: [
    {
      index: true,
      element: <Navigate to="list" replace />,
    },
    {
      path: 'list',
      element: <ListPage />,
      meta: { label: '模版列表', key: '/design/list' },
    },
    {
      path: 'cate',
      element: <CatePage />,
      meta: { label: '模版分类', key: '/design/cate' },
    },
  ],
};

export default design;
